<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="app.title">OxiCloud</title>
    
    <!-- Styles -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/inlineViewer.css">
    <link rel="stylesheet" href="/css/fileViewer.css">
    <link rel="stylesheet" href="/css/favorites.css">
    <link rel="stylesheet" href="/css/recent.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>

    <!-- Scripts -->
    <script src="/js/i18n.js"></script>
    <script src="/js/languageSelector.js"></script>
    <script src="/js/ui.js"></script>
    <script src="/js/contextMenus.js"></script>
    <script src="/js/fileOperations.js"></script>
    <script src="/js/search.js"></script>
    <script src="/js/favorites.js"></script>
    <script src="/js/recent.js"></script>
    <script src="/js/fileRenderer.js"></script>
    <script src="/js/fileSharing.js"></script>
    <script src="/js/components/sharedView.js"></script>
    <!-- Los viewers se cargan al final para asegurar que document.body esté disponible -->
    <script defer src="/js/fileViewer.js"></script>
    <script defer src="/js/inlineViewer.js"></script>
    <script src="/js/app.js"></script>

    <!-- Service Worker Registration -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(reg => console.log('Service Worker registered successfully'))
                    .catch(err => console.log('Service Worker registration failed:', err));
            });
        }
    </script>
</head>
<body>
    <!-- Sidebar -->
    <div class="sidebar">
        <div class="logo-container">

            <div class="logo">
                <svg viewBox="0 0 500 500">
                    <path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z" fill="#fff"/>
                </svg>
            </div>
            <div class="app-name">OxiCloud</div>
        </div>

        <div class="nav-menu">
            <div class="nav-item active">
                <i class="fas fa-folder"></i>
                <span data-i18n="nav.files">Files</span>
            </div>
            <div class="nav-item" id="nav-shared">
                <i class="fas fa-share-alt"></i>
                <span data-i18n="nav.shared">Shared</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-clock"></i>
                <span data-i18n="nav.recent">Recent</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-star"></i>
                <span data-i18n="nav.favorites">Favorites</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-trash"></i>
                <span data-i18n="nav.trash">Trash</span>
            </div>
        </div>

        <div class="storage-container">
            <div class="storage-title">Almacenamiento</div>
            <div class="storage-bar">
                <div class="storage-fill"></div>
            </div>
            <div class="storage-info">Calculando...</div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Top Bar -->
        <div class="top-bar">
            <div class="search-container">
                <i class="fas fa-search search-icon"></i>
                <input type="text" data-i18n-placeholder="actions.search" placeholder="Buscar archivos, carpetas...">
                <button id="search-button" class="search-button"><i class="fas fa-search"></i></button>
            </div>

            <div class="user-controls">
                <div id="language-selector" class="language-selector">ES</div>
                <div class="user-avatar">MR</div>
                <div id="logout-btn" class="logout-btn" title="Cerrar sesión">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
        </div>

        <div class="content-area">
            <h1 class="page-title" data-i18n="nav.files">Archivos</h1>

            <div class="actions-bar">
                <div class="action-buttons">
                    <button class="btn btn-primary" id="upload-btn">
                        <i class="fas fa-upload" style="margin-right: 5px;"></i> <span data-i18n="actions.upload">Subir</span>
                    </button>
                    <button class="btn btn-secondary" id="new-folder-btn">
                        <i class="fas fa-folder-plus" style="margin-right: 5px;"></i> <span data-i18n="actions.new_folder">Nueva carpeta</span>
                    </button>
                </div>

                <div class="view-toggle">
                    <button class="toggle-btn active" id="grid-view-btn" title="Vista de cuadrícula">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="toggle-btn" id="list-view-btn" title="Vista de lista">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>

            <div class="dropzone" id="dropzone">
                <i class="fas fa-cloud-upload-alt" style="font-size: 32px; margin-bottom: 10px;"></i>
                <p data-i18n="dropzone.drag_files">Arrastra archivos aquí o haz clic para seleccionar</p>
                <input type="file" id="file-input" style="display: none;" multiple>
                <div class="upload-progress">
                    <div class="progress-bar">
                        <div class="progress-fill"></div>
                    </div>
                </div>
            </div>

            <div class="breadcrumb">
                <span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
            </div>

            <!-- Files Container -->
            <div class="files-container">
                <!-- Grid View -->
                <div class="files-grid" id="files-grid">
                    <!-- Files will be populated here -->
                </div>

                <!-- List View (hidden by default) -->
                <div class="files-list-view" id="files-list-view" style="display: none;">
                    <div class="list-header">
                        <div data-i18n="files.name">Nombre</div>
                        <div data-i18n="files.type">Tipo</div>
                        <div data-i18n="files.size">Tamaño</div>
                        <div data-i18n="files.modified">Modificado</div>
                    </div>
                    <!-- Files will be populated here in list view -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>
